<template>
  <el-dialog
    title="填写启动参数"
    :visible.sync="visible"
    width="630px"
    :before-close="handleClose"
  >
    <el-form
      ref="startParamsForm"
      :model="startParams"
      :rules="rules"
      label-width="130px"
      class="params-form"
    >
      <!-- 省份代号 -->
      <el-form-item
        label="省份代号"
        prop="province"
      >
        <el-input
          v-model="startParams.province"
          placeholder="请输入省份代号"
          maxlength="20"
        ></el-input>
      </el-form-item>

      <!-- 账户名 -->
      <el-form-item
        label="账户名"
        prop="account"
      >
        <el-input
          v-model="startParams.account"
          placeholder="请输入账户名"
          maxlength="50"
        ></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item
        label="密码"
        prop="password"
      >
        <el-input
          v-model="startParams.password"
          placeholder="请输入密码"
          type="password"
          show-password
          maxlength="50"
        ></el-input>
      </el-form-item>

      <!-- 待清账科目编号 -->
     <el-form-item
        label="待清账科目编号"
        prop="subject_nos"
      >
        <el-input
          v-model="startParams.subject_nos"
          placeholder="请输入待清账科目编号,多个用英文逗号分隔"
        ></el-input>
      </el-form-item>

      <!-- 登录单位编号 -->
      <el-form-item
        label="登录单位编号"
        prop="unit"
      >
        <el-input
          v-model="startParams.unit"
          placeholder="请输入登录单位编号（非必填）"
          maxlength="20"
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'StartParamsDialog',
  props: {
    // 控制对话框显示/隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 初始参数（可选）
    initialParams: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 表单数据
      startParams: {
        province: "",
        account: "",
        password: "",
        subject_nos: [],
        unit: ""
      },
      // 科目编号选项（示例数据，可根据实际业务调整）
      subjectOptions: [
        { value: '1001', label: '1001 - 库存现金' },
        { value: '1002', label: '1002 - 银行存款' },
        { value: '1122', label: '1122 - 应收账款' },
        { value: '1221', label: '1221 - 其他应收款' }
      ],
      // 表单验证规则
      rules: {
        province: [
          { required: true, message: '请输入省份代号', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入账户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        subject_nos: [
          { 
            required: true, 
            message: '请输入待清账科目编号', 
            trigger: 'blur' 
          }
        ]
      }
    }
  },
  watch: {
    // 监听初始参数变化，同步到表单
    initialParams: {
      handler(val) {
        this.startParams = { ...this.startParams, ...val }
      },
      immediate: true
    },
    // 监听对话框显示状态
    visible(val) {
      // 关闭对话框时重置表单
      if (!val) {
        this.$refs.startParamsForm && this.$refs.startParamsForm.resetFields()
      }
    }
  },
  methods: {
    // 提交表单
    handleSubmit() {
      this.$refs.startParamsForm.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交数据
          this.$emit('submit', { ...this.startParams })
          this.handleCancel()
        } else {
          this.$message.warning('请完善必填项信息')
          return false
        }
      })
    },
    // 取消操作
    handleCancel() {
      this.$emit('update:visible', false)
    },
    // 关闭对话框回调
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.params-form {
  margin-top: 10px;
}

.form-hint {
  margin-top: 5px;
  font-size: 12px;
  color: #606266;
}

.dialog-footer {
  text-align: right;
}
</style>
